<template>
  <div class="cuoti-page">
    <div class="header">
      <h1>小学算数错题识别</h1>
      <div class="header-decoration">
        <span class="decoration-item">➕</span>
        <span class="decoration-item">➖</span>
        <span class="decoration-item">✖️</span>
        <span class="decoration-item">➗</span>
      </div>
    </div>
    
    <div class="upload-container">
      <div class="file-upload-wrapper">
        <input type="file" id="file-upload" @change="handleFileUpload" accept="image/*" class="file-input" />
        <label for="file-upload" class="file-label">
          <div class="upload-icon">📷</div>
          <span>{{ file ? file.name : '选择作业照片' }}</span>
        </label>
      </div>
      
      <button @click="submitFile" class="submit-button" :disabled="!file">
        <span v-if="!loading">开始识别</span>
        <span v-else class="loading-spinner">⟳</span>
      </button>
    </div>
    
    <div v-if="loading" class="mask">
      <div class="loading-message">
        <div class="loading-spinner big"></div>
        <p>正在识别...</p>
      </div>
    </div>
    
    <div v-if="error" class="error-toast">{{ error }}</div>
    
    <div v-if="result" class="result-section">
      <h2>{{ resultTitle }}</h2>
      <div class="result-container">
        <div class="result-summary">
          <div class="summary-item">
            <div class="summary-number">{{ result.total_questions }}</div>
            <div class="summary-label">总题目数</div>
          </div>
          <div class="summary-item">
            <div class="summary-number">{{ result.wrong_questions.length }}</div>
            <div class="summary-label">错题数</div>
          </div>
        </div>
        
        <div class="wrong-questions">
          <h3>错题列表</h3>
          <div v-for="(question, index) in result.wrong_questions" :key="index" class="wrong-question-item">
            <div class="question-number">{{ question.question_number }}</div>
            <div class="question-details">
              <p class="question-content">{{ question.question_content }}</p>
              <p class="error-reason">{{ question.error_reason }}</p>
            </div>
          </div>
        </div>
        
        <div class="wrong-questions">
          <h3>分析过程</h3>
          <div class="wrong-question-item analysis">
            <div v-html="dealit(analyzeContent)" class="marked-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Marked from 'marked';

// 去除 katex 相关代码
export default {
  data() {
    return {
      resultTitle: '示例结果',
      file: null,
      loading: false,
      error: null,
      result: {
        "total_questions": 3,
        "wrong_questions": []
      },
      analyzeContent:"### \u5206\u6790\u4e0e\u5224\u65ad\n\u6839\u636e\u63d0\u4f9b\u7684\u56fe\u7247\u5185\u5bb9\uff0c\u56fe\u7247\u4e2d\u6709\u4ee5\u4e0b\u4e09\u9053\u9898\u76ee\uff1a\n1. \\( \\frac{3}{3} = 1 \\)\n2. \\( 3 + 2 = 5 \\)\n3. \\( 3 \\times 3 = 9 \\)\n\n\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u9010\u4e00\u5224\u65ad\u6bcf\u9053\u9898\u7684\u6b63\u786e\u6027\uff1a\n\n#### 1. \\( \\frac{3}{3} = 1 \\)\n- \u5206\u6790\uff1a3 \u9664\u4ee5 3 \u7b49\u4e8e 1\uff0c\u8fd9\u662f\u6b63\u786e\u7684\u6570\u5b66\u8fd0\u7b97\u3002\n- \u5224\u65ad\uff1a\u6b63\u786e\u3002\n\n#### 2. \\( 3 + 2 = 5 \\)\n- \u5206\u6790\uff1a3 \u548c 2 \u76f8\u52a0\u7b49\u4e8e 5\uff0c\u8fd9\u662f\u6b63\u786e\u7684\u6570\u5b66\u8fd0\u7b97\u3002\n- \u5224\u65ad\uff1a\u6b63\u786e\u3002\n\n#### 3. \\( 3 \\times 3 = 9 \\)\n- \u5206\u6790\uff1a3 \u548c 3 \u76f8\u4e58\u7b49\u4e8e 9\uff0c\u8fd9\u662f\u6b63\u786e\u7684\u6570\u5b66\u8fd0\u7b97\u3002\n- \u5224\u65ad\uff1a\u6b63\u786e\u3002\n\n### \u603b\u7ed3\n\u7ecf\u8fc7\u5224\u65ad\uff0c\u6240\u6709\u9898\u76ee\u5747\u6b63\u786e\uff0c\u6ca1\u6709\u9519\u8bef\u7684\u9898\u76ee\u3002"
    };
  },
  methods: {
    dealit(str) {
      // 使用正则表达式替换除法公式
      const replacedStr = str.replace(/\\frac\{(\d+)\}\{(\d+)\}/g, '$1/$2').replace(/\\times/g, 'x');
      return Marked.parse(replacedStr);
    },
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async submitFile() {
      if (!this.file) {
        this.error = '请选择一张图片';
        return;
      }
      this.loading = true;
      this.error = null;
      try {
        const formData = new FormData();
        formData.append('image', this.file);
        const response = await axios.post('/api/cuoti', formData);
        if (response.data.status === 'success') {
          this.resultTitle = '识别结果';
          this.result = response.data.data;
          this.analyzeContent = response.data.analyzeContent;
        } else {
          this.error = '识别失败，请重试';
        }
      } catch (error) {
        this.error = '调用后端接口失败，请稍后重试';
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.cuoti-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Comic Sans MS', 'Yuanti SC', 'Yuanti', sans-serif;
  background-color: #f9f9ff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #4a6bff;
  font-size: 28px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.header-decoration {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.decoration-item {
  font-size: 24px;
  color: #ff6b6b;
  animation: bounce 2s infinite alternate;
}

.decoration-item:nth-child(2) {
  animation-delay: 0.5s;
  color: #4ecdc4;
}

.decoration-item:nth-child(3) {
  animation-delay: 1s;
  color: #ffd166;
}

.decoration-item:nth-child(4) {
  animation-delay: 1.5s;
  color: #6a0572;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
}

.file-upload-wrapper {
  width: 100%;
  max-width: 400px;
}

.file-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  border: 3px dashed #4a6bff;
  border-radius: 15px;
  background-color: rgba(74, 107, 255, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #4a6bff;
  font-weight: bold;
}

.file-label:hover {
  background-color: rgba(74, 107, 255, 0.1);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(74, 107, 255, 0.2);
}

.upload-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.submit-button {
  background: linear-gradient(45deg, #4a6bff, #77e1ff);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 40px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(74, 107, 255, 0.3);
}

.submit-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 7px 20px rgba(74, 107, 255, 0.4);
}

.submit-button:disabled {
  background: linear-gradient(45deg, #cccccc, #eeeeee);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.loading-spinner.big {
  font-size: 40px;
  color: white;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-message {
  text-align: center;
  color: white;
  margin: 0 auto;
}

.loading-message p {
  margin-top: 15px;
  font-size: 18px;
}

.error-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff6b6b;
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  font-weight: bold;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.result-section {
  margin-top: 30px;
}

.result-section h2 {
  text-align: center;
  color: #4a6bff;
  margin-bottom: 20px;
}

.result-container {
  background-color: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.result-summary {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.summary-item {
  text-align: center;
}

.summary-number {
  font-size: 36px;
  font-weight: bold;
  color: #4a6bff;
}

.summary-label {
  color: #666;
  margin-top: 5px;
}

.wrong-questions {
  margin-top: 30px;
}

.wrong-questions h3 {
  color: #4a6bff;
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.wrong-question-item {
  background-color: #f9f9ff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.wrong-question-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.question-number {
  background-color: #ff6b6b;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.question-details {
  flex-grow: 1;
}

.question-content {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
}

.error-reason {
  color: #ff6b6b;
  font-size: 14px;
}

.wrong-question-item.analysis {
  display: block;
}

.marked-content {
  line-height: 1.6;
}

.marked-content h3 {
  color: #4a6bff;
  margin-top: 0;
}

.marked-content ul {
  padding-left: 20px;
}

@media (max-width: 600px) {
  .cuoti-page {
    padding: 5px;
    border-radius: 10px;
  }
  
  .header h1 {
    font-size: 24px;
  }
  
  .result-summary {
    gap: 20px;
  }
  
  .summary-number {
    font-size: 28px;
  }
}
</style>